<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结算页面</title>
    <!--引入资源：vue要在element之前引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="/js/axios.helper.js"></script>
    <style>
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <!--第一行：头部-->
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-light">蜗牛学苑</div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <!--第二行：搜索-->
            <el-row>
                <el-col :span="12">
                    <!--第二行：左边搜索-->
                    <el-form :inline="true" :model="condition" class="demo-form-inline">
                        <el-form-item label="请输入">
                            <el-input v-model="condition.keyword" placeholder="书名/作者/类型"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="queryBook">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <!--第二行：右边 个人中心 我的购物车 我的订单-->
                    <div style="text-align: right">

                        <!--未登录显示-->
                        <span v-if="nickName == ''">
                                <el-link type="info" :href="'/login.html'">登录</el-link>
                                <el-link type="info" :href="'/register.html'">注册</el-link>
                            </span>
                        <span v-else>
                                欢迎你,{{nickName}}
                                <el-link type="info" @click="logout">退出系统</el-link>
                            </span>

                        <el-link type="info" :href="'/cart.html'">我的购物车</el-link>
                        <el-link type="info">我的订单</el-link>
                    </div>
                </el-col>
            </el-row>

            <!--第三行：面包屑； 类别导航-->
            <el-row>
                <el-col :span="24">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item v-for="type in typeList">
                            <el-link :href="`/index/showBookList?typeId=${type.id}`" type="info"
                                     style="color: gray; font-weight: normal">{{type.name}}
                            </el-link>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>

            <!--收货地址-->
            <el-row>
                <el-col :span="12">
                    收货地址：
                    <el-select v-model="addressId" placeholder="请选择收货地址" style="width: 600px">
                        <el-option
                                v-for="item in addresses"
                                :key="item.address"
                                :label="item.address"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-button type="success" @click="showAddressDialog()">新增收货地址</el-button>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-table :data="cartVo.cartItemVos" tooltip-effect="dark" style="width: 100%">
                        <el-table-column prop="name" label="商品名称"></el-table-column>
                        <el-table-column label="商品图片">
                            <template slot-scope="scope">
                                <el-image style="width:120px;height: 120px" :src="scope.row.imgsrc"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="商品单价"></el-table-column>
                        <el-table-column prop="buyCount" label="购买数量"></el-table-column>
                        <el-table-column prop="sumPrice" label="小计" ></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <!--总价 / 提交订单-->
            <el-row>
                <el-col :span="22">
                    总价(元)：{{cartVo.totalPrice}}
                </el-col>
                <el-col :span="2">
                    <el-button @click="submitOrder">提交订单</el-button>
                </el-col>
            </el-row>


        </el-main>
    </el-container>


    <!--新增收获地址弹出框-->
    <el-dialog title="新增收货地址" :visible.sync="dialogVisible" width="40%">
        <el-form label-width="80px" :model="address">
            <el-form-item label="省">
                <el-select v-model="address.province" placeholder="请选择省" @change="loadCities">
                    <el-option
                            v-for="p in provinces"
                            :key="p.id"
                            :label="p.name"
                            :value="p.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="城市">
                <el-select v-model="address.city" placeholder="请选择城市" @change="loadAreas">
                    <el-option
                            v-for="c in cities"
                            :key="c.id"
                            :label="c.name"
                            :value="c.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="区域">
                <el-select v-model="address.area" placeholder="请选择区域">
                    <el-option
                            v-for="a in areas"
                            :key="a.id"
                            :label="a.name"
                            :value="a.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <!--还需要再加：详细地址，邮箱，收货人，联系电话-->
            <el-form-item label="详细地址">
                <el-input type="textarea" v-model="address.detailAddress"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input v-model="address.tel"></el-input>
            </el-form-item>
            <el-form-item label="收件人">
                <el-input v-model="address.reciver"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码">
                <el-input v-model="address.emailCode"></el-input>
            </el-form-item>
            <el-form-item label="默认地址">
                <el-radio-group v-model="address.isDefault">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addAddress()">确 定</el-button>
      </span>
    </el-dialog>


</div>
</body>
<!-- 将后端数据渲染到JavaScript变量中 -->
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data() {
            return {
                // 搜索条件
                condition: {
                    keyword: ''
                },
                typeList: [],
                nickName: '',
                addressId: 0, // 用来默认选中的
                addresses: [],
                dialogVisible: false,
                address: {
                    province: '',
                    city: '',
                    area: ''
                },
                provinces: [],
                cities: [],
                areas: [],
                cartVo: {
                    cartItemVos: [],
                    totalPrice: 0
                },
                // 保证接口幂等校验的唯一id
                uni_submit_order_id: ''
            }
        },
        methods: {
            // 图书搜索
            queryBook() {

            },
            // 查询图书分类列表
            queryBookType() {
                axios.get('/booktype').then(resp => {
                    this.typeList = resp.data.data;
                })
            },
            // 查询登录用户昵称
            getLoginName() {
                // axios请求，会通过拦截器携带token到后台
                axios.get('/user/getLoginName').then(resp => {
                    if (resp.data.code == 200) {
                        this.nickName = resp.data.data;
                    } else {
                        this.nickName = ''
                    }
                })
            },
            logout() {
                this.$confirm('确定退出?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    localStorage.removeItem("token");
                    location.href = '/index.html'
                })
            },
            // 查询地址
            getAddressList() {
                axios.get('/address/findAll').then(resp => {
                    this.addresses = resp.data.data;
                    // 处理：默认地址
                    this.addresses.forEach(a => {
                        if (a.isDefault == "1") {
                            this.addressId = a.id;
                            return;
                        }
                    })
                })
            },
            // 新增地址
            showAddressDialog() {
                this.dialogVisible = true;
                this.address = {
                    province: '',
                    city: '',
                    area: ''
                },
                axios.get('/address/getAllProvince').then(resp=>{
                    this.provinces = resp.data.data;
                })
            },
            // 省份变化，查询省份对应的城市
            loadCities() {
                this.address.city = ''
                this.address.area = ''
                // 获取选择的省份id
                let provinceId = this.address.province;
                axios.get(`/address/getAllCities?provinceId=${provinceId}`).then(resp=>{
                    this.cities = resp.data.data;
                })
            },
            // 城市变化，加载区域
            loadAreas() {
                this.address.area = ''
                // 获取选择的省份id
                let cityId = this.address.city;
                axios.get(`/address/getAllAreas?cityId=${cityId}`).then(resp=>{
                    this.areas = resp.data.data;
                })
            },
            // 新增地址
            addAddress() {
                axios.post(`/address/save`,this.address).then(resp=>{
                    if (resp.data.code == 200) {
                        this.$message.success('添加成功')
                        // 刷新地址列表
                        this.getAddressList();
                        this.dialogVisible = false;
                    } else {
                        this.$message.success('添加失败')
                    }
                })
            },
            // 显示购买的商品
            getCartVo(){
                let ids = [[${ids}]];
                axios.post('/cart/calc',ids).then(resp=>{
                    this.cartVo.cartItemVos = resp.data.data.cartItemVos;
                    this.cartVo.totalPrice = resp.data.data.totalPrice;
                })
            },
            // 提交订单
            submitOrder(){
                axios.post(`/order/submitOrder/${this.addressId}/${this.uni_submit_order_id}`,this.cartVo).then(resp=>{
                    if (resp.data.code == 200) {
                        this.$message.success('提交订单成功,正在跳转')
                        setTimeout(()=>{
                            location.href = '/order.html';
                        },3000);
                    } else {
                        this.$message.error(resp.data.message)
                    }
                });
            }
        },
        created() {
            // 查询图书分类列表
            this.queryBookType();
            // 查询登录用户昵称
            this.getLoginName();
            // 查询地址
            this.getAddressList();
            // 显示购买的商品
            this.getCartVo();
            // 表单提交前，先生成唯一id
            this.uni_submit_order_id = "uni_order_submit_" + Date.now();
        }
    })
</script>
</html>